<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:个人中心
@author:成都市一颗优雅草科技有限公司     
@version V3.0
@松鼠聚合直播系统
注意：本前端源码遵循 蜻蜓优雅草产品开源授权协议，本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->



<template>
	<view style=" background: #ffffff;">
	
		<view class="my-head-box">
		  <view class="user-info">{{userInfo.username}}&gt;</view>
		  <view class="user-vip">{{userInfo.vip_level}}</view>
		</view>

		<view class="controll-box">
		  <view class="controll-bar">
			<view class="bar-item" @click="goTo('../buy/buy')">
			  <view class="image-box"><img style="width: 69rpx;height: 57rpx;" src="/static/himg1.png" /></view>
			  <view class="text">充值会员</view>
			</view>
			<view class="bar-item" @click="goTo('../collect/collect')">
			  <view class="image-box"><img style="width: 50rpx;height: 57rpx;" src="/static/himg2.png" /></view>
			  <view class="text">我的收藏</view>
			</view>
			<view class="bar-item" @click="goTo('../share/share')">
			  <view class="image-box"><img style="width: 48rpx;height: 57rpx;" src="/static/himg3.png" /></view>
			  <view class="text">分享免费看</view>
			</view>
		  </view>

		  <view class="bottom-line"></view>

		  <view class="controll-bar">
			<view class="bar-item">
			  <view class="num">{{userInfo.free_times}}</view>
			  <view class="text">免费天数</view>
			</view>
			<view class="bar-item">
			  <view class="num">{{userInfo.offers_days}}</view>
			  <view class="text">奖励天数</view>
			</view>
			<view class="bar-item">
			  <view class="num">{{userInfo.tuijian_count}}</view>
			  <view class="text">推广人数</view>
			</view>
		  </view>
		</view>

		<view class="myacount-bg"></view>

		<view class="cell-box">
		  <view class="cell-row">
			<view class="ico-box"><img style="width: 58rpx;height: 46rpx;" src="/static/km_ico.png" /></view>
			<view class="text-box">
				<text style="margin-top: 10rpx;">卡密激活</text>
				<input type="text" name="kmjh" v-model="card_no" class="input-box" value="" @confirm="activeCard()" />
			<button type="primary" size="mini" style="width:80rpx;padding: 5rpx;" @click="activeCard()">激活</button></view>
		  </view>
		  <view class="cell-row">
			<view span="3" class="ico-box"><img style="width: 58rpx;height: 50rpx;" src="/static/time_ico.png" /></view>
			<view span="21" class="text-box"><text style="margin-right: 20rpx;">到期时间</text>
			  <text v-if="userInfo.end_time == '已到期'" style="color: red;">{{userInfo.end_time}}</text>
			  <text v-else>{{userInfo.end_time}}</text>
			</view>
		  </view>
		  <view class="cell-row">
			<view span="3" class="ico-box"><img style="width: 58rpx;height: 50rpx;" src="/static/service_ico.png" /></view>
			<view span="21" class="text-box">专属购买客服</view>
		  </view>
		  <view class="cell-row">
			<view span="3" class="ico-box"><img style="width: 58rpx;height: 56rpx;" src="/static/qq_ico.png" /></view>
			<view span="21" class="text-box"><text style="margin-right: 20rpx;">QQ</text><text>{{userInfo.server_qq}}</text></view>
		  </view>
		</view>

		<view class="tuigangma" @click="copyText()">
		  邀请码：{{userInfo.tuijianma}}
		</view>

		<view class="button-box">
		  <button type="warn" style="border-radius: 60rpx;" @click="logout()">安全退出账号</button>
		</view>
	  

	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardvalue:'',
				userInfo:{},
				card_no:"",
				isSubmiting:false,
				isLoaded:false
			}
		},
		onLoad(){
			this.updateInfo();
			this.isLoaded = true;
		},
		onShow(){
			if(this.isLoaded){
				this.isLoaded = false;
			}else{
				this.updateInfo();
			}
			
		},
		methods: {
			goTo:function(url){
				uni.navigateTo({
					url:url
				});
			},
			updateInfo:function(){
			  if(this.appInfo.isLogin()) {
				this.userInfo = this.appInfo.getUser();
				this.request.get({
					url:"index.php/index/index/userinfo",
					success:(res)=>{
						if(res.data.code == 1){
							this.userInfo = this.appInfo.setUserInfo(res.data.data);
							console.log(this.userInfo);
						}else{
							this.userInfo = this.appInfo.setUserInfo(null);
							uni.uni.showModal({
								title: '提示',
								content: '获取用户信息失败',
								showCancel: false,
								success: (res)=> {
									uni.navigateBack({
										delta:1
									});
								}
							});
						}
					},
					fail:(error)=>{
						uni.uni.showModal({
							title: '提示',
							content: '获取用户信息失败',
							showCancel: false,
							success: (res)=> {
								uni.navigateBack({
									delta:1
								});
							}
						});
					}
				});
			  }else{
				uni.navigateTo({
					url:"../login/login"
				})
			  }
			},
			onRefresh:function(){
			  this.updateInfo();
			},
			logout:function () {
				this.request.get({
					url:"index.php/index/index/logout",
					success:(res)=>{
						if(res.data.code ==1){
						  uni.setStorageSync("u_token", null);
						  this.appInfo.setUserInfo(null);
						  uni.reLaunch({
						  	url:"../index/index"
						  });
						}else{
						  uni.showToast({
						  	title:"出现未知错误",
							icon:"none"
						  });
						}
					}
				});
			},
			activeCard:function () {
			  if(this.card_no.length != 32){
				uni.showToast({
					icon:"none",
					title:"卡密长度不正确"
				});
				return;
			  }
			  uni.showLoading({
			  	title:"激活中..."
			  });
			  
			  this.request.post({
				  url:"index.php/index/member/active_card",
				  data:{
					  card_no:this.card_no
				  },
				  success:(res)=>{
					 uni.hideLoading(); 
					 this.card_no = "";
					 if(res.data.code ==1){
					   this.updateInfo();
					   uni.showModal({
						   title: '提示',
						   showCancel:false,
						   content: res.data.msg
					   });
					 }else{
						 uni.showToast({
						 	icon:"none",
						 	title:res.data.msg
						 });
					 }
				  },
				  fail:()=>{
					uni.hideLoading();   
				  }
			  });
			},
			copyText:function(){
			  if(this.userInfo.tuijianma.length){
				  uni.setClipboardData({
					  data:this.userInfo.tuijianma,
					  success() {
					  	uni.showToast({
					  		icon:"none",
					  		title:"邀请码已复制到剪贴板"
					  	});
					  }
				  });
			  }
			}
		}
	}
</script>

<style scoped>
.my-head-box{
  background: url(~@/static/user_top.png) no-repeat;
  background-size: cover;
  height: 197rpx;
  padding: 70rpx 40rpx 60rpx;
  color: white;
  position: relative;
}
.user-info{
  font-size: 42rpx;
  padding-left: 160rpx;
  color: white;
}
.user-vip{
  font-size: 28rpx;
  padding: 20rpx 0rpx;
  padding-left: 160rpx;
}
.controll-box{
  padding: 20rpx;
  background: white;
  border-radius: 20rpx;
  width: 660rpx;
  margin: auto;
  margin-top: -80rpx;
  z-index: 9999;
  position: relative;
  box-shadow: 0rpx 10rpx 10rpx #eaeaea;
}
.controll-bar{
  text-align: center;
  padding: 20rpx 0rpx;
  display: flex;
}
.bar-item{
  padding:10rpx 20rpx;
  width: 33.33%;
}
.bar-item .text{
  font-size: 30rpx;
  color: #333;
}
.bar-item .num{
  font-size: 50rpx;
  color: #333;
  font-weight: 600;
  color: #41b2fb;
}
.bottom-line{
  border-bottom: 1rpx solid #e3e3e3;
  width: 600rpx;
  margin: auto;
}
.tuigangma{
  background: url("~@/static/yqm_bg.png");
  background-size: cover;
  text-align: center;
  color: #fff;
  font-size: 36rpx;
  line-height: 108rpx;
  margin: 20rpx auto;
  width: 680rpx;
  height: 108rpx;
}
.cell-box{
  padding:10rpx 40rpx;
}
.cell-row{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.ico-box{
  width: 70rpx;
  height: 89rpx;
  line-height: 89rpx;
  vertical-align: middle;
}
.text-box{
  font-size: 30rpx;
  border-bottom:#e3e3e3 1rpx solid;
  padding: 20rpx 0rpx;
  display: flex;
  flex-direction: row;
  width: 600rpx;
}
.text-box text{
	margin-right: 10rpx;
}
.input-box{
  background: #e9e9e9;
  outline: none;
  border: none;
  border-radius: 40rpx;
  padding: 10rpx 30rpx;
  width: 300rpx;
  font-size: 24rpx;
  color: #bababa;
}
.button-box{
  padding:20rpx 50rpx;
}
.myacount-bg{
  background: url("~@/static/myacount.png");
  background-size: cover;
  width: 705rpx;
  height: 45rpx;
  margin:40rpx auto;
}
</style>
